<template>
	<view style = "text-align: center;margin-top: 100rpx;">
        <image :src="iconFilePath" @click="updateImage" mode="aspectFill" class="avatar-image"></image>
		<button @click="updateImage">选择图片展示</button>
		<button @click="previewImage">预览图片</button>
		<button @click="getImageInfo">获取图片信息</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFilePath:'/static/logo.png'
			}
		},
		methods: {
			updateImage(){
				uni.chooseImage({
					count:1,
					sizeType:['original','compressed'],
					sourceType:['album'],
					success: (res)=>{
						this.iconFilePath=res.tempFilePaths[0];
					}
				});
			},
			previewImage(){
				uni.previewImage({
					urls:[this.iconFilePath]
				});
			},
			getImageInfo(){
				uni.getImageInfo({
					src:this.iconFilePath,
					success:(image)=>{
					console.log('图片宽度:',image.width);
					console.log('图片高度:',image.height);
					}
				});
			},
			
		}
	}
</script>

<style>
.avatar-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
</style>